<template>
		<section>
			<h1>登录页面</h1>
			<el-form :model="ruleForm" ref="ruleForm" label-width="100px" style="width: 50%; margin-left:auto ; margin-right: auto;">
				<el-form-item label="用户名" prop="username" required>
					<el-input v-model="ruleForm.username"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password" required>
					<el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
				</el-form-item>
				<!-- <el-form-item label="记住密码">
					<el-switch v-model="ruleForm.rememberMe"></el-switch>
				</el-form-item> -->
				<el-form-item >
					<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
					<el-button @click="resetForm('ruleForm')">重置</el-button>
				</el-form-item>
			</el-form>
		</section>
</template>

<script>
export default {
  data () {
    return {
      ruleForm:{}
    }
  },
	
	methods:{
		//表单重置
		resetForm: function(formRef){
			this.$refs[formRef].resetFields()
		},
		
		//表单提交
		submitForm: function(formRef){
			var _this = this;
			console.log('form data: ', this.ruleForm)
			this.$refs[formRef].validate((valid) => {
			  //验证通过
			  if(valid){
					//登录接口
					this.$axios.post('/api/login', this.ruleForm)
							.then(res => {
								//请求成功-业务正常处理返回
								if(res.data.success){
									this.$message({type:'success',message:'登录成功！',duration:2000,
										onClose: () => {
												//存 session
												let loginSession = res.data.result
												console.log('>> login success with session return:', loginSession)
												sessionStorage.setItem('loginSession', JSON.stringify(loginSession))
												// _this.$store.commit('loginSession', loginSession) //代替 SessionStorage
												//路由跳转 replace
												let path = this.$route.query.redirect; //query.redirect 传值待实现-axios中怎么传递..sessionStorage?>>router.currentRoute.path
												console.log('>> pre route path:', path)
												this.$router.replace({path: (path=='/' || path==undefined)?'/home':path}) //回到之前页
												//this.$router.push('/home') //登陆拦截用replace好一些，避免登录成功跳转后又跑回来登录
											}
									})
								}else{
									//请求成功-业务异常
									//业务异常后操作..
								}
						})
			  }else{ //验证没通过
					return false
				}
			})
		}		
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
